<template>
    <div class="flex flex-wrap flex-column h-100vh w-full">
        <div class="h-fit w-full flex items-center justify-end">
            <div class="glass rounded-s-2 px-2 pb-1">
                <Clock class="me-2" />
                <ThemeSwitch />
            </div>
        </div>
        <div class="w-100 mx-auto">
            <div class="glass rounded-1">
                <SearchBar />
            </div>
            <el-card class="mt-1 glass border-none" body-class="p-1 flex flex-wrap justify-between">
                <el-link class="mx-2 my-1" :href="item.url" target="_blank" v-for="(item, idx) of linkList"
                    :key="idx">{{
                        item.text }}</el-link>
                <el-link class="mx-2 my-1" @click="gotoUrl('/i')">我的</el-link>
                <el-link class="mx-2 my-1" @click="gotoUrl('/all')">全部</el-link>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import linkList from '@/mock/_favorite';
import SearchBar from '@/components/searchbar/SearchBar.vue';
import Clock from '@/components/clock/Clock.vue';
import ThemeSwitch from '@/components/theme-switch/ThemeSwitch.vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const gotoUrl = (path) => {
    router.push(path)

}
</script>